<template>
	<view>
		<view class="register">
			<view class="form">
				<input class="uni-input" type="number" placeholder="请输入账号" v-model="form.mobile" />
				<view class="code">
					<input class="uni-input" type="password" placeholder="请输入密码" v-model="form.password" />
					<!-- <button type="default" :disabled="disabled" @click="sendCode">{{ btnTxt }}</button> -->
				</view>
				<view class="btn">
					<button type="default" @click="login">登录</button>
				</view>
			</view>
			<!-- <view class="privacy">登录既表明同意<text @click="navTo(1)">《安瑞律师用户协议》</text>和<text @click="navTo(2)">《隐私政策》</text></view> -->
		</view>
	</view>
</template>

<script>
	import { loginPassword } from '@/api/globalApi.js'
	// 验证手机号是否正确
	const regTel = (tel) => {
	    let reg = /^1[3|4|5|7|8]\d{9}$/
	    return reg.test(tel)
	}
	export default {
		data() {
			return {
				form: {
					mobile: '',
					password: ''
				},
				disabled: false,
			}
		},
		methods: {
			async login() {
				// console.log(this.form)
				const res = await loginPassword(this.form)
				console.log(res)
				// #ifdef APP-PLUS
				this.$IM.login({userId:res.data.data.member.id + '',userSig:res.data.data.sin},(ret)=>{
					console.log('IM登录',ret);
				});
				// #endif
				uni.setStorageSync('user',res.data.data)
				uni.setStorageSync('token',res.data.data.token)
				uni.setStorageSync('isLogin', true)
				uni.setStorageSync('isRefresh', true)
				uni.switchTab({url: '/pages/user/user'})
			},
			sendCode() {
				if (!regTel(this.form.mobile)) {
					uni.showToast({title: '请输入正确的手机号', icon: 'none'})
				} else {
					uni.showLoading({
						title: '请稍后...'
					})
					uni.request({
					    url: 'https://api.arapp.net/client/visitor/sendcode', //仅为示例，并非真实接口地址。
					    data: {
					        mobile: this.form.mobile - 0,
							channel: 1
					    },
					    success: (res) => {
					        console.log(res.data)
					        if (res.data.code === 0) {
								this.time = 60
								this.disabled = true
								this.timer()
							} else {
								uni.showToast({title: res.data.message, icon: 'none'})
							}
							uni.hideLoading()
					    },
						fail: (err) => {
							console.log(err)
							uni.hideLoading()
						}
					})
				}
			},
			timer() {
				if (this.time > 0) {
					 this.time--
					 this.btnTxt = this.time + "s后重新获取"
					 setTimeout(this.timer, 1000)
				} else{
					 this.time = 0
					 this.btnTxt = "获取验证码"
					 this.disabled = false
				}
			},
			register() {
				let data = {
					...this.form,
					 openid: this.userInfo.openid,
					 nickname: this.userInfo.nickname,
					 avatar: this.userInfo.headimgurl,
					 unionid: this.userInfo.unionid,
					 province: this.userInfo.province,
					 city: this.userInfo.city
				}
				console.log(data)
				uni.request({
				    url: "https://api.arapp.net/client/visitor/recommendRegister", //仅为示例，并非真实接口地址。
					method: "POST",
				    data: data,
				    success: (res) => {
				        console.log(res.data)
				        if (res.data.code === 0) {
							uni.navigateTo({url: './index'})
						} else {
							uni.showToast({title: res.data.message, icon: 'none'})
						}
						uni.hideLoading()
				    },
					fail: (err) => {
						console.log(err)
						uni.hideLoading()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.register {
		height: 100vh;
		background: url('https://oss.arapp.net/img/bg.jpg') no-repeat 0 30%;
		background-size: cover;
		.form {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: fixed;
			bottom: 80rpx;
			left: 50%;
			transform: translate(-50%, -70%);
			.uni-input {
				width: 590rpx;
				height: 91rpx;
				background-color: #ffffff;
				border-radius: 4rpx;
				padding-left: 30rpx;
			}
			.code {
				display: flex;
				margin-top: 30rpx;
				.uni-input {
					width: 590rpx;
					user-select: text;
					-webkit-user-select: text;
				}
				button {
					height: 91rpx;
					width: 200rpx;
					padding: 0;
					margin: 0;
					border-radius: 0rpx 4rpx 4rpx 0rpx;
					background-color: #0d2647;
					font-size: 28rpx;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					&::after {
						border: 0;
					}
				}
			}
			.btn {
				margin-top: 50rpx;
				height: 91rpx;
				background-color: #0d2647;
				border-radius: 4rpx;
				width: 620rpx;
				button {
					background-color: #0d2647;
					border-radius: 4rpx;
					font-size: 32rpx;
					color: #fff;
					margin: 0;
					padding: 0;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 91rpx;
				}
			}
		}
		.privacy {
			font-size: 24rpx;
			// color: #0d2647;
			color: #fff;
			text-align: center;
			position: fixed;
			bottom: 70rpx;
			left: 0;
			right: 0;
		}
	}
</style>
